<template>
    <div class="popup">
        <van-search
                v-model="searchVal"
                show-action
                shape="round"
                :placeholder="searchPlaceholder"
                @search="onSearch"
                @input="onInput"
                @cancel="onCancel"></van-search>
        <HistoryHot v-if="blockShow==1" :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList" @tagClick="tagClick"/>

        <MyList v-else-if="blockShow==2" :arr="ListArr" @cellClick="cellClick"/>

        <MyProduct v-else :filterCategory="filterCategory" :goodsList="goodsList" @priceChange="priceChange"
                   @categoryChange="categoryChange"/>
    </div>
</template>

<script>
    import HistoryHot from '@/components/HistoryHot.vue'
    import MyProduct from '@/components/MyProduct.vue'
    import MyList from '@/components/MyList.vue'
    import {GetSearchHistory, GetGoodsList, GetTimeData} from '@/request/api.js'

    export default {
        name: "Search",
        data() {
            return {
                // 搜索框的值
                searchVal: '',
                // 搜索框的提示
                searchPlaceholder: '请输入搜索关键词',
                //  1代表历史记录与热门搜索区块
                // 2 代表列表区块
                // 3 代表产品区块
                blockShow: 1,
                // 热门搜索
                historyKeywordList: [],
                // 搜索历史记录
                hotKeywordList: [],
                // 传递给MyProduct 组件分类的数据
                filterCategory: [],
                // 传递给MyProduct 组件商品列表数据
                goodsList: [],
                // 价格排序
                order: 'desc',
                // 分类id
                categoryId: 0,
                //  排序的方式 id 是默认排序 price是价格排序
                sort: 'id',
                // list组件数据
                ListArr: []
            }
        },
        created() {
            this.GetSearchHistory()
        },
        methods: {
            // 分类下拉菜单点击事件
            categoryChange(val) {
                this.categoryId = val
                this.onSearch()
            },
            // 价格下拉菜单点击事件
            priceChange(val) {
                this.order = val
                this.sort = 'price'
                this.onSearch()
            },
            onSearch() {
                let _this = this
                // 搜索请求
                GetGoodsList({
                    keyword: this.searchVal,
                    page: 1,
                    size: 20,
                    order: _this.order,
                    categoryId: _this.categoryId,
                    sort: _this.sort
                }).then(res => {
                    if (res.errno == 0) {
                        //  搜索成功跳转产品区块
                        _this.blockShow = 3
                        let {filterCategory, goodsList} = res.data
                        let arr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
                        _this.filterCategory = arr
                        console.log(_this.filterCategory)
                        _this.goodsList = goodsList
                    }
                })
            },
            // 实时搜索
            onInput() {
                this.blockShow = 2
                GetTimeData({keyword: this.searchVal}).then(res => {
                    if (res.errno == 0) {
                        this.ListArr = res.data
                    }
                })
            },
            onCancel() {
                // go(-1)代表跳回上一个页面
                this.searchVal = ' '
                this.$router.go(-1)

            },
            // 历史区块标签点击事件
            tagClick(item){
                this.searchVal =item
                this.onSearch()
            },
            // 列表区块点击事件
            cellClick(item){
                this.searchVal= item
                this.onSearch()
            },
            GetSearchHistory() {
                GetSearchHistory().then(res => {
                    console.log(res);
                    if (res.errno == 0) {
                        let {defaultKeyword, historyKeywordList, hotKeywordList} = res.data
                        this.searchPlaceholder = defaultKeyword.keyword
                        this.historyKeywordList = historyKeywordList
                        this.hotKeywordList = hotKeywordList
                    }
                })
            }
        },
        components: {
            HistoryHot,
            MyProduct,
            MyList
        }
    }
</script>

<style lang="less" scoped>
    .popup {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background: #efefef;
    }
</style>